<template>
  <div class="relative h-full">
    <canvas ref="chartCanvas" class="w-full h-full"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  color: {
    type: String,
    default: 'blue'
  }
})

const chartCanvas = ref(null)
let chart = null

// 颜色配置
const colorMap = {
  blue: {
    border: 'rgb(59, 130, 246)',
    background: 'rgba(59, 130, 246, 0.1)',
    gradient: ['rgba(59, 130, 246, 0.3)', 'rgba(59, 130, 246, 0.05)']
  },
  green: {
    border: 'rgb(34, 197, 94)',
    background: 'rgba(34, 197, 94, 0.1)',
    gradient: ['rgba(34, 197, 94, 0.3)', 'rgba(34, 197, 94, 0.05)']
  },
  purple: {
    border: 'rgb(147, 51, 234)',
    background: 'rgba(147, 51, 234, 0.1)',
    gradient: ['rgba(147, 51, 234, 0.3)', 'rgba(147, 51, 234, 0.05)']
  }
}

// 创建渐变
const createGradient = (ctx, chartArea, colors) => {
  const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top)
  gradient.addColorStop(0, colors[1])
  gradient.addColorStop(1, colors[0])
  return gradient
}

// 绘制图表
const drawChart = () => {
  if (!chartCanvas.value || !props.data.length) return
  
  const ctx = chartCanvas.value.getContext('2d')
  const colors = colorMap[props.color] || colorMap.blue
  
  // 清除之前的图表
  if (chart) {
    chart.destroy()
  }
  
  // 创建图表
  chart = {
    draw: () => {
      const width = chartCanvas.value.width
      const height = chartCanvas.value.height
      const padding = 40
      const chartWidth = width - padding * 2
      const chartHeight = height - padding * 2
      
      // 清空画布
      ctx.clearRect(0, 0, width, height)
      
      if (props.data.length === 0) return
      
      // 计算数据范围
      const maxValue = Math.max(...props.data.map(d => d.value))
      const minValue = Math.min(...props.data.map(d => d.value))
      const range = maxValue - minValue || 1
      
      // 绘制网格线
      ctx.strokeStyle = '#e5e7eb'
      ctx.lineWidth = 1
      
      // 水平网格线
      for (let i = 0; i <= 5; i++) {
        const y = padding + (chartHeight / 5) * i
        ctx.beginPath()
        ctx.moveTo(padding, y)
        ctx.lineTo(width - padding, y)
        ctx.stroke()
      }
      
      // 垂直网格线
      const stepX = chartWidth / (props.data.length - 1)
      props.data.forEach((_, i) => {
        const x = padding + stepX * i
        ctx.beginPath()
        ctx.moveTo(x, padding)
        ctx.lineTo(x, height - padding)
        ctx.stroke()
      })
      
      // 绘制区域填充
      ctx.beginPath()
      props.data.forEach((item, i) => {
        const x = padding + stepX * i
        const y = padding + chartHeight - ((item.value - minValue) / range) * chartHeight
        if (i === 0) ctx.moveTo(x, y)
        else ctx.lineTo(x, y)
      })
      
      // 填充区域
      ctx.lineTo(width - padding, height - padding)
      ctx.lineTo(padding, height - padding)
      ctx.closePath()
      
      const gradient = ctx.createLinearGradient(0, padding, 0, height - padding)
      gradient.addColorStop(0, colors.gradient[0])
      gradient.addColorStop(1, colors.gradient[1])
      ctx.fillStyle = gradient
      ctx.fill()
      
      // 绘制线条
      ctx.beginPath()
      props.data.forEach((item, i) => {
        const x = padding + stepX * i
        const y = padding + chartHeight - ((item.value - minValue) / range) * chartHeight
        if (i === 0) ctx.moveTo(x, y)
        else ctx.lineTo(x, y)
      })
      
      ctx.strokeStyle = colors.border
      ctx.lineWidth = 3
      ctx.lineJoin = 'round'
      ctx.lineCap = 'round'
      ctx.stroke()
      
      // 绘制数据点
      props.data.forEach((item, i) => {
        const x = padding + stepX * i
        const y = padding + chartHeight - ((item.value - minValue) / range) * chartHeight
        
        // 外圈
        ctx.beginPath()
        ctx.arc(x, y, 5, 0, Math.PI * 2)
        ctx.fillStyle = '#ffffff'
        ctx.fill()
        ctx.strokeStyle = colors.border
        ctx.lineWidth = 2
        ctx.stroke()
        
        // 内圈
        ctx.beginPath()
        ctx.arc(x, y, 3, 0, Math.PI * 2)
        ctx.fillStyle = colors.border
        ctx.fill()
      })
      
      // 绘制标签
      ctx.fillStyle = '#6b7280'
      ctx.font = '12px sans-serif'
      ctx.textAlign = 'center'
      
      props.data.forEach((item, i) => {
        const x = padding + stepX * i
        const y = height - padding + 20
        ctx.fillText(item.label, x, y)
      })
    }
  }
  
  // 设置canvas尺寸
  const rect = chartCanvas.value.getBoundingClientRect()
  chartCanvas.value.width = rect.width * window.devicePixelRatio
  chartCanvas.value.height = rect.height * window.devicePixelRatio
  ctx.scale(window.devicePixelRatio, window.devicePixelRatio)
  
  chart.draw()
}

// 监听数据变化
watch(() => props.data, () => {
  drawChart()
}, { deep: true })

// 监听窗口大小变化
const handleResize = () => {
  drawChart()
}

onMounted(() => {
  drawChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (chart) {
    chart = null
  }
})
</script>

<style scoped>
canvas {
  width: 100% !important;
  height: 100% !important;
}
</style>